<template>
  <view class="rtl">
    <view class="login-form-top">
      <image :src="logo" mode=""></image>
    </view>
    <view class="m10">
      <view class="h45 ipt">
        <lgInput v-model="params.username" :isImages="false" :isArea="true" placeholder="Enter phone" content="Phone"
          areaCode="966" @change="changeUserName" />
      </view>
      <view class="h45 ipt">
        <lgInput v-model="params.password" :isImages="true" :password="params.passwordType" placeholder="Enter password"
          @pwdType="(data) => { params.passwordType = data }" :isArea="false" content="Password" />
      </view>
      <view class="login-form-checkbox">
        <view style="display: flex;align-items: center;" @click="handleCheckbox">
          <image :src="checkboxValue ? checked : check" class="checkbox-icon"></image>
          <view>{{ t("Keep me logged in") }}</view>
        </view>
        <view @click="resetPwd">{{ t("Forgot Password?") }}</view>
      </view>
      <view class="h45 f14" :class="{ 'disabled': !isFormValid }" :style="{
        backgroundColor: isFormValid ? '#AB9F71' : '#D1C9AC'
      }" @click="isFormValid ? handleLogIn() : null">
        {{ t("Log In") }}
      </view>
      <view class="login-phone f15 rtl">
        <image :src="kefu" class="w40"></image>
        <view>{{ t("Trouble logining in?") }}</view>
      </view>
      <view class="f15 mt20 rtl" style="display: flex;">
        <text>
          {{ t("By continuing, you agree to our") }}
          <text style="text-decoration: underline;" @click="handleTerms">{{ t("Terms of Service") }}</text>
          {{ t("and") }}
          <text style="text-decoration: underline;" @click="handleTerms">{{ t("Privacy Policy") }}</text>
        </text>

      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import logo from "@/static/images/logo.png";
import check from "@/static/images/check.png";
import checked from "@/static/images/checked.png";
import kefu from "@/static/images/kefu.png";
import lgInput from "./lg-input.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n()


const emits = defineEmits(["handleLogIns"]);
const params = reactive({
  username: "",
  password: "",
  passwordType: true,
});
const changeUserName = () => { };
const changePassword = () => { };

const checkboxValue = ref(true);
// 选择协议内容
const checkboxList = reactive([
  {
    name: "Keep me logged in",
    disabled: false,
  },
]);
// 是否选中
const handleCheckbox = () => {
  checkboxValue.value = !checkboxValue.value;
};
// 登录
const handleLogIn = () => {
  if (!params.username) return uni.showToast({
    icon: "none",
    title: 'Enter UserName'
  })
  if (!params.password) return uni.showToast({
    icon: "none",
    title: 'Enter Password'
  })
  if (!checkboxValue.value) return uni.showToast({
    icon: "none",
    title: 'Agreement protocol'
  })
  emits("handleLogIns", params);
};
// 跳转到浏览器
const handleWindow = () => {
  window.location.href = "https://www.baidu.com/"
}

const isFormValid = computed(() => {
  const phoneValid = params.username;
  const passwordValid = params.password;
  return phoneValid && passwordValid
  // && checkboxValue.value;
});

const handleTerms = () => {
  // Implement the logic to handle terms click
  console.log("Terms of Service clicked");
};
//忘记密码
const resetPwd = () => {
  uni.navigateTo({
    url: "/pages/login/reset-pwd",
  });
}
</script>

<style scoped lang="scss">
@import "@/static/css/index.scss";

.login-form-top {
  display: flex;
  height: 400rpx;
  width: 100%;
  margin-bottom: 40rpx;

  image {
    width: 180rpx;
    height: 180rpx;
    margin: 0 auto;
    margin-top: 200rpx;
  }


}


.login-form-checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22rpx;
  margin-bottom: 20rpx;
  color: #fff;

  .checkbox-icon {
    width: 26rpx;
    height: 26rpx;
    margin-right: 10rpx;
  }
}

.login-phone {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #fff;
  margin-top: 20rpx;

  image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }
}

.m10 {
  margin: 0 21rpx;
}

.h45 {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 90rpx;
  background-color: $primary-f;
  border-radius: 8rpx;
  margin-bottom: 40rpx;
}

.w40 {
  width: 40rpx;
  height: 40rpx;
  ;
}

.f14 {
  font-size: 28rpx;
  background-color: $primary-e;
  color: #000;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.f15 {
  color: #fff;
  font-size: 28rpx;
}

.mt20 {
  margin-top: 30rpx;
}

.h16 {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #fff;
  font-size: 12px;
}

.h17 {
  text-decoration: underline;
  padding-left: 6rpx;
}

.line10 {
  line-height: 50rpx;
}

.disabled {
  pointer-events: none;
  cursor: not-allowed;
}
</style>

<style></style>